Flexible Box Layout Module – Flexbox

CSS model za raspored elemenata u jednom smjeru – vodoravno (red) ili okomito (stupac).

Što nam omogućuje?

• Raspoređivanje elemenata
• Poravnanje elemenata
• Raspodjelu prostora između elemenata

Kako to funkcionira?

Elementi se šire kako bi popunili raspoloživi slobodni prostor

Elementi se skupljaju kako ne bi prešli dozvoljene granice

Osnovna Svojstva Flex Containera:

• display: flex; – Aktivira flexbox na elementu
• flex-direction – Definira smjer glavne osi
• row (zadano) – Slijeva nadesno
• row-reverse – S desna nalijevo
• column – Odozgo prema dolje
• column-reverse – Odozdo prema gore
• flex-wrap – Omogućuje prelamanje elemenata u novi red
• nowrap (zadano) – Sve ostaje u jednom redu
• wrap – Prelamanje kada nema dovoljno prostora
• wrap-reverse – Obrnuto prelamanje
• justify-content – Poravnava elemente duž glavne osi
• flex-start (zadano) – Početak osi
• center – Centrirano
• flex-end – Kraj osi
• space-between – Prvi i zadnji element na rubovima, ostali ravnomjerno raspoređeni
• space-around – Jednaki razmaci oko svih elemenata
• space-evenly – Jednaki razmaci između svih elemenata
• align-items – Poravnava elemente duž poprečne osi
• stretch (zadano) – Ispunjava cijelu visinu/širinu
• baseline – Poravnato prema osnovnoj liniji teksta
• align-content – Kontrolira poravnavanje kada postoji više redova

Osnovna Svojstva Flex Items:

• order – Mijenja redoslijed prikaza elemenata (zadano 0, niže vrijednosti idu prve)
• flex-grow – Omogućuje elementima da rastu (zadano 0)
• flex-shrink – Omogućuje smanjenje elemenata kada nema prostora (zadano 1)
• flex-basis – Postavlja početnu veličinu elementa prije prilagođavanja (može biti auto, px, %...)
• align-self – Pojedinačno mijenja poravnanje za određeni element (vrijednosti iste kao align-items)

Kada koristiti Flexbox?

• Kada trebate jednostavno centriranje elemenata.
• Za raspored elemenata u jednom smjeru.
• Kada želite responzivan dizajn.

Zaključak

Flexbox je moćan alat za upravljanje rasporedom elemenata. Omogućuje lako poravnanje, fleksibilno skaliranje i izradu responzivnih dizajna.